<template>
  <div class="manage fillcontain">
    <el-row style="height: 100%">
      <el-col :span="4" style="min-height:100%; background-color: #324057">
        <!-- 菜单栏 -->
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          background-color="#324057"
          text-color="#bfcbd9"
          active-text-color="#20a0ff"
          router
        >
          <el-menu-item index="manage">
            <i class="el-icon-menu"></i>首页
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>数据管理
            </template>
            <el-menu-item index="userList">用户列表</el-menu-item>
            <el-menu-item index="shopList">商家列表</el-menu-item>
            <el-menu-item index="foodList">食品列表</el-menu-item>
            <el-menu-item index="orderList">订单列表</el-menu-item>
            <el-menu-item index="adminList">管理员列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-plus"></i>添加数据
            </template>
            <el-menu-item index="addShop">添加商铺</el-menu-item>
            <el-menu-item index="addGoods">添加商品</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-star-on"></i> 图表
            </template>
            <el-menu-item index="visitor">用户分布</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-edit"></i> 编辑
            </template>
            <el-menu-item index="vueEdit">文本编辑</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-tools"></i> 设置
            </template>
            <el-menu-item index="adminSet">管理员设置</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-warning"></i> 说明
            </template>
            <el-menu-item index="explain">说明</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="20" style="height:100%; overflow:auto">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "manage",
  components: {},
  data() {
    return {};
  },
  mounted() {
    console.log(this.$route.path.substr(1));
  },
  methods: {},
  computed: {
    defaultActive() {
      return this.$route.path.substr(1);
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin.less";
.manage {
  .el-submenu {
    .el-menu-item {
      min-width: 100%;
    }
  }
}
.el-submenu__title i{
  color: #bfcbd9;
  font-size: 18px;
  font-weight: 600;
}
</style>
